<template>
	<view  class="box" @click="onCancel()">
		<view class="" @click.stop>
			<view class="ca-digital-keyboard" :class="'mode-' + mode">
				<view class="dk-close" v-if="mode !== 1 && mode !== 4" @click="close()">
					<icon type="clear" color="#333" :size="u50"></icon>
				</view>
				<swiper class="dk-swiper" :current="current">
					<swiper-item @touchmove.prevent.stop>
						<view class="dk-title">{{textInfo.title}}</view>
						<view class="dk-subtitle">{{textInfo.subTitle}}</view>
						<view class="pwd-box" @click="getKeyboard">
							<view class="pwd-text" v-for="(item,index) in digits" :key="index" :data-index="index"
								:class="{active:(activeInput == index)}">{{payPassWord[index]}}</view>
						</view>
					</swiper-item>
					<!-- 设置新安全密码 -->
					<block v-if="[2, 5].includes(mode)">
						<swiper-item @touchmove.prevent.stop>
							<view class="dk-title">{{textInfo.title}}</view>
							<view class="dk-subtitle">{{textInfo.twoSubTitle}}</view>
							<view class="pwd-box" @click="getKeyboard">
								<view class="pwd-text" v-for="(item,index) in digits" :key="index" :data-index="index"
									:class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
							</view>
						</swiper-item>
					</block>
					<!-- 修改安全密码 -->
					<block v-else-if="mode === 3">
						<swiper-item @touchmove.prevent.stop>
							<view class="dk-title">{{textInfo.twoTitle}}</view>
							<view class="dk-subtitle">{{textInfo.twoSubTitle}}</view>
							<view class="pwd-box" @click="getKeyboard">
								<view class="pwd-text" v-for="(item,index) in digits" :key="index" :data-index="index"
									:class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
							</view>
						</swiper-item>
						<swiper-item @touchmove.prevent.stop>
							<view class="dk-title">{{textInfo.threeTitle}}</view>
							<view class="dk-subtitle">{{textInfo.threeSubTitle}}</view>
							<view class="pwd-box" @click="getKeyboard">
								<view class="pwd-text" v-for="(item,index) in digits" :key="index" :data-index="index"
									:class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<block v-if="![1, 4].includes(mode)">
					<view class="pwd-tips">安全密码为6位数字，用于提现、设置密保、添加银行卡等操作，可保障资金安全</view>
					<view class="pwd-tips pwd-tips-errot">{{msgText}}</view>
				</block>
				<!-- <view
  	    v-if="showForget && mode === 1"
  	    class="pwd-forget"
  	    @click="forgetPwd"
  	  >
  	    <text>忘记安全密码</text>
  	  </view> -->
				<view class="digital-keyboard" :class="{'is-show' : dkFlag || mode === 1 || mode === 4}">
					<view class="dk-down" v-if="mode !== 1 && mode !== 4">
						<block v-if="showPrevText">
							<view class="dk-submit dk-return" @click="changeSwiper(-1)">上一步</view>
						</block>
						<view class="dk-down-icon" @click="changeKeyboard(!dkFlag)"></view>
						<block v-if="trigger && !(mode === 2 && current === 0)">
							<view class="dk-submit" @click="submit(true)">完成</view>
						</block>
					</view>
					<view class="digital-key-box">
						<view class="num" v-for="item in digitalList" :key="item"
							:class="{'no-num' : ['', '-1'].includes(item)}" @click="getKeyNumber(item)">{{item}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'CaPaymentPassword',
		data() {
			return {
				activeInput: 0, //当前输入的下标
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'], //键盘
				paymentPwd: '', //安全密码内容
				dkFlag: true, //安全密码键盘的显示与隐藏
				current: 0,
				paymentPwds: [], //上一次安全密码内容,历史安全密码,
				msgText: '',
				u50: uni.upx2px(50),
			};
		},
		watch:{
			show(){
				 this.paymentPwd = ''
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			onCancel: {
				type: Function,
				default: () => {}
			},
			onConfirm: {
				type: Function,
				default: () => {}
			},
			digits: {
				type: Number,
				default: 6
			},
			// 仅在mode为1的时候生效
			showForget: {
				type: Boolean,
				default: true
			},
			/*
			 *	可选值说明（这一个顺序最好不要改，跟当前步骤步进行有关系，自动提交要用到mode跟current的判断  是否要自动提交）
			 *	1 安全密码校验（用于校验安全）
			 *	2 设置安全密码（2步  输入=》确认输入）
			 *	3 修改安全密码（3步 原安全密码=》输入=》确认输入）
			 *	4 找回登录密码(同mode = 1一样，就怕后端校验接口不一样而额外添加的一个mode)
			 *	5 重置安全密码
			 */
			mode: {
				type: Number,
				default: 1
			},
			/*
			 *	是否自动提交
			 */
			trigger: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			modalFlag: {
				get() {
					return this.value
				},
				set(value) {
					this.$emit('input', value)
				}
			},
			payPassWord() {
				var payPassWord = this.paymentPwd.split('') || [];
				payPassWord.fill('*');
				return payPassWord;
			},
			textInfo() {
				let arr = [{
						title: '输入安全密码',
						subTitle: '请输入安全密码'
					},
					{
						title: '设置安全密码',
						subTitle: '请设置安全密码',
						twoSubTitle: '请再次输入安全密码以确认'
					},
					{
						title: '修改安全密码',
						twoTitle: '设置安全密码',
						threeTitle: '设置安全密码',
						subTitle: '请输入安全密码 以验证身份',
						twoSubTitle: '请设置新的安全密码',
						threeSubTitle: '请再次输入安全密码以确认',
					},
					{
						title: '输入安全密码',
						subTitle: '请输入安全密码'
					},
					{
						title: '重置安全密码',
						subTitle: '请输入安全密码',
						twoSubTitle: '请再次输入安全密码以确认'
					}
				]
				return arr[this.mode - 1];
			},
			parentMode() {
				return this.mode === 1 || this.mode === 4 ? 'full' : 'cover';
			},
			parentPosition() {
				return this.mode === 1 || this.mode === 4 ? 'bottom' : 'middle';
			},
			showPrevText() {
				return this.current >= (this.mode - 1) || (this.mode === 5 && this.current > 0) ? true : false;
			}
		},
		methods: {
			// 模态框显示或者关闭的回调
			changeModal(e) { // 返回是一个Boolean值
				if (e) {
					this.current = 0;
					this.changeKeyboard(); //默认拉起键盘
				} else {
					this.changeKeyboard(false); //默认拉起键盘
					this.clearAll();
					this.$emit('cancel');
				}
			},
			// 开关键盘
			changeKeyboard(flag = true) {
				this.dkFlag = flag;
				!flag && (this.activeInput = -1);
			},
			clear(time = 0) {
				setTimeout(() => {
					this.paymentPwd = '';
					this.activeInput = 0;
					this.paymentPwds.splice(this.current, 1);
				}, time)
			},
			clearAll() {
				this.paymentPwd = '';
				this.activeInput = 0;
				this.current = 0;
				this.showError()
				this.paymentPwds = [];
			},
			showError(msg) {
				if (!msg) return this.msgText = '';
				if (![1, 4].includes(this.mode)) {
					this.msgText = msg;
				} else {
					uni.showToast({
						title: msg
					})
				}
			},
			forgetPwd() {
				console.log('忘记密码跳转写这边')
			},
			close() {
				let tips = '';
				if (this.mode === 2) {
					tips = '您是否要放弃设置安全密码';
				} else if (this.mode === 5) {
					tips = '您是否要放弃重置安全密码';
				} else {
					tips = '您是否要放弃修改安全密码';
				}
				uni.showModal({
					title: '关闭提示',
					content: tips,
					confirmText: '我再想想',
					cancelText: '关闭',
					success: (res) => {
						if (!res.confirm) {
							this.modalFlag = false
						}
					}
				})
			},
			submit(clickFlag) { //clickFlag主动点击
				this.onCancel()
				this.onConfirm(this.paymentPwd)
			},
			// 提交安全密码设置
			setSafePwd() {
				if (this.paymentPwd !== this.paymentPwds[this.current - 1]) {
					this.showError('两次安全密码输入不一致');
					this.clear(300);
					return;
				}
				// 这边可以通过this.mode来区分不同请求  2  3  5 提交都会走这边
				// 模拟请求，把这个换成ajax请求哈，或者emit出去 外面去请求，但是建议都集成在这边 省的写一堆重置代码
				setTimeout(() => {
					uni.hideLoading();
					let response = { //模拟返回
						code: 1,
						msg: '设置密码正确'
					}
					// 密码输入正确,判断就看你们自己接口
					if (response.code === 1) {
						this.modalFlag = false;
						// 告知父组件
					} else {
						// 密码输入错误
						this.clear();
						this.showError(response.msg);
					}
				}, 1000)
				// 这是把代码传出去，组件外做校验
				const emitTypes = {
					2: 'setting',
					3: 'modify',
					5: 'resetting'
				}
				this.$emit('submit', {
					type: emitTypes[this.mode],
					value: this.paymentPwd
				})
			},
			// 校验密码对不对
			verifySafePwd() {
				uni.showLoading({
					title: '校验安全密码中'
				});
				//模拟请求，把这个换成ajax请求哈
				setTimeout(() => {
					uni.hideLoading();
					let response = { //模拟返回
						code: 1,
						msg: '密码正确'
					}
					// 密码输入正确,判断就看你们自己接口
					if (response.code === 1) {
						// 密码输入正确
						//执行下一步
						this.changeSwiper(1);
					} else {
						// 密码输入错误
						this.clear();
						this.showError(response.msg);
					}
				}, 1000)
			},
			// 一次性输入校验
			checkSafePwd() {
				uni.showLoading({
					title: '校验安全密码中'
				});
				//模拟请求，把这个换成ajax请求哈
				setTimeout(() => {
					uni.hideLoading();
					let response = { //模拟返回
						code: 1,
						msg: '密码正确'
					}
					// 密码输入正确,判断就看你们自己接口
					if (response.code === 1) {
						this.modalFlag = false;
						// 告知父组件
						this.$emit('submit', {
							type: 'check',
							value: this.paymentPwd
						});
					} else {
						// 密码输入错误
						this.clear();
						this.showError(response.msg);
					}
				}, 1000)
			},
			changeSwiper(num) {
				this.current += num;
				this.paymentPwd = this.paymentPwds[this.current] || '';
				let activeInput = this.paymentPwd.length
				this.activeInput = activeInput - (activeInput >= this.digits ? 1 : 0);
			},
			getKeyNumber(val) {
				let paymentPwdArr = this.paymentPwd.split('');
				if (val === '' || (val != -1 && paymentPwdArr.length === this.digits)) { //空或者已经达到最大值
					if (paymentPwdArr.length === this.digits && this.trigger) {
						this.submit();
						return;
					}
					return false;
				} else if (val != -1) { //数字输入
					paymentPwdArr.splice(this.activeInput, 0, val);
					this.activeInput++;
					this.paymentPwd = paymentPwdArr.join('');
					this.paymentPwds[this.current] = this.paymentPwd;
					if (paymentPwdArr.length === this.digits && this.trigger) {
						this.submit();
						return;
					}
				} else { //删除
					if (this.activeInput >= 0) {
						this.activeInput !== 0 && this.activeInput--;
						paymentPwdArr.splice(this.activeInput, 1);
						this.paymentPwd = paymentPwdArr.join('');
						this.paymentPwds[this.current] = this.paymentPwd;
					}
				}
				this.showError();
			},
			getKeyboard(e) {
				let index = e && e.target.dataset.index;
				if (index === undefined) {
					this.activeInput = 0;
					this.changeKeyboard(false);
					return;
				}
				var _length = this.paymentPwd.length;
				this.activeInput = index <= _length ? index : _length;
				this.changeKeyboard();
			}
		}
	}
</script>

<style>
	/* 键盘 */
	.ca-digital-keyboard {
		height: 100%;
		background-color: #fff;
	}

	.ca-digital-keyboard.mode-1,
	.ca-digital-keyboard.mode-4 {
		height: auto;
		border-radius: 40rpx 40rpx 0 0;
		background: #fff url() center top / 100% auto no-repeat;
		padding-bottom: 0px;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.ca-digital-keyboard.mode-2,
	.ca-digital-keyboard.mode-5,
	.ca-digital-keyboard.mode-3 {
		padding-top: 180rpx;
	}

	.ca-digital-keyboard.mode-2 .dk-title,
	.ca-digital-keyboard.mode-5 .dk-title,
	.ca-digital-keyboard.mode-3 .dk-title {
		color: #000;
	}

	.ca-digital-keyboard.mode-2 .digital-keyboard,
	.ca-digital-keyboard.mode-5 .digital-keyboard,
	.ca-digital-keyboard.mode-3 .digital-keyboard {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.ca-digital-keyboard .dk-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
	}

	.ca-digital-keyboard .dk-swiper {
		height: 260rpx;
	}

	.ca-digital-keyboard .dk-submit {
		position: absolute;
		right: 0;
		top: 0;
		padding: 0 20rpx;
		color: #38f;
		font-size: 28rpx;
		line-height: 70rpx;
	}

	.ca-digital-keyboard .dk-return {
		right: auto;
		left: 0;
	}

	.ca-digital-keyboard .dk-close {
		position: fixed;
		left: 30rpx;
		top: 30rpx;
	}

	.ca-digital-keyboard .dk-subtitle {
		font-size: 24rpx;
		color: #989894;
		line-height: 3;
		text-align: center;
	}

	.ca-digital-keyboard .dk-down {
		text-align: center;
		line-height: 70rpx;
		box-shadow: 0 0 0 1px #eee;
	}

	.ca-digital-keyboard .dk-down .dk-down-icon {
		border-left: 1px solid #bbb;
		border-bottom: 1px solid #bbb;
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
	}

	.ca-digital-keyboard .pwd-tips {
		color: #666;
		font-size: 24rpx;
		line-height: 1.5;
		padding: 14rpx 100rpx;
	}

	.ca-digital-keyboard .pwd-tips-errot {
		color: #ff4242;
		font-size: 30rpx;
		text-align: center;
	}

	.ca-digital-keyboard .pwd-forget {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #26c6b3;
		text-align: center;
		line-height: 32rpx;
	}

	.ca-digital-keyboard .digital-keyboard {
		margin-top: 30rpx;
		box-shadow: 0 -0.5px 0 1px #eee;
		width: 100%;
		transition: all 0.2s linear;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}

	.ca-digital-keyboard .digital-key-box {
		box-shadow: 0 0 0 1px #eee;
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	.ca-digital-keyboard .digital-keyboard.is-show {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.ca-digital-keyboard .num {
		transition: all 0.2s linear;
		float: left;
		background-color: #fff;
		box-shadow: 0 0 0 1px #eee;
		width: 33.33333333%;
		cursor: pointer;
		text-align: center;
		color: #333;
		font-size: 54rpx;
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		position: relative;
		overflow: hidden;
	}
/* 
	.ca-digital-keyboard .num:after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		background-image: radial-gradient(circle,
				rgba(0, 0, 0, 0.65) 20%,
				transparent 20%);
		background-repeat: no-repeat;
		background-position: 50%;
		-webkit-transform: scale(5);
		transform: scale(5);
		opacity: 0;
		transition: opacity 0.3s ease-in-out, -webkit-transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
		transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out,
			-webkit-transform 0.2s ease-in-out;
	} */

	.ca-digital-keyboard .num:active:after {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5;
		transition: 0s;
	}

	.ca-digital-keyboard .num:nth-of-type(3n + 1) {
		border-bottom: 0;
		border-left: 0;
	}

	.ca-digital-keyboard .num:nth-of-type(3n + 2) {
		border-bottom: 0;
		border-left: 0;
		border-right: 0;
	}

	.ca-digital-keyboard .num.no-num {
		background-color: #f2f2f2;
		font-size: 0;
	}

	.ca-digital-keyboard .num:last-child {
		background: #f2f2f2 url() center center/auto 50rpx no-repeat;
	}

	.ca-digital-keyboard .pwd-box {
		padding-left: 10rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ca-digital-keyboard .pwd-text {
		position: relative;
		vertical-align: middle;
		font-size: 50rpx;
		font-weight: bold;
		width: 92rpx;
		height: 92rpx;
		display: flex;
		justify-content: center;
		line-height: 2.2;
		box-shadow: 0 0 0 1px #ccc;
		overflow: hidden;
	}

	.ca-digital-keyboard .pwd-text+.pwd-text {
		margin-left: 10rpx;
	}

	.ca-digital-keyboard .pwd-text.active:after {
		-webkit-animation: twinkle 1s infinite;
		animation: twinkle 1s infinite;
		height: 70%;
		width: 4rpx;
		content: '';
		position: absolute;
		top: 15%;
		left: 50%;
		margin-left: -2rpx;
		background-color: #4fa5e1;
	}

	.box {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background: rgba(0, 0, 0, .5);
	}

	@-webkit-keyframes twinkle {
		from {
			background-color: #4fa5e1;
		}

		to {
			background-color: transparent;
		}
	}

	@keyframes twinkle {
		from {
			background-color: #4fa5e1;
		}

		to {
			background-color: transparent;
		}
	}
</style>